<template>
  <div class="dialog" v-if="dialogVisible" :class="dialogClassName" @mouseenter="newDra" @click="selectDialog">
    <div class="dialog-title">
      <p>编辑</p>
      <div class="dialog-title-close" @click="handleClose">
        <el-icon><Close /></el-icon>
      </div>
    </div>
    <div class="dialog-line"></div>
    <div class="dialog-con">
      <el-form
        size="small"
        ref="formRef"
        :inline="true"
        :model="dialogRelevant.form"
        :rules="dialogRelevant.rules"
        label-width="75px"
      >
        <el-form-item label="单位名称" prop="unit_name">
          <el-input
            v-model.trim="dialogRelevant.form.unit_name"
            placeholder="请输入"
            maxLength="40"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="单位代码" prop="unit_code">
          <el-input
            v-model.trim="dialogRelevant.form.unit_code"
            placeholder="请输入"
            maxLength="40"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input
            v-model.trim="dialogRelevant.form.apply_user"
            placeholder="请输入"
            maxLength="40"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-input
            v-model.trim="dialogRelevant.form.applied_at"
            placeholder="请输入"
            maxLength="40"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人电话">
          <el-input
            v-model.trim="dialogRelevant.form.apply_mobile"
            placeholder="请输入"
            maxLength="40"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="审核人">
          <el-input
            v-model.trim="dialogRelevant.form.process_user"
            placeholder="请输入"
            maxLength="40"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="审核时间">
          <el-input
            v-model.trim="dialogRelevant.form.processed_at"
            placeholder="请输入"
            maxLength="40"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="审核人电话">
          <el-input
            v-model.trim="dialogRelevant.form.process_mobile"
            placeholder="请输入"
            maxLength="40"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-line"></div>
    <div class="dialog-footer">
      <el-button class="btn-cancel" @click="dialogRelevant.dialogCancel">取消</el-button>
      <el-button class="btn-confirm" type="primary" @click="dialogRelevant.dialogConfirm">确定</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted, defineProps, defineEmits, nextTick, watch} from 'vue';
import {useStore} from 'vuex';
import {ElMessage} from 'element-plus';
import manageApi from '@/api/manage.ts';
import UseDraggable from '@/utils/useDraggableElem';

const dialogVisible = ref(false);
const store = useStore();

const props = defineProps({
  dialogVisible: Boolean,
  id: Number,
});

const emit = defineEmits(['closeDialog', 'updateList']);

const handleClose = () => {
  emit('closeDialog');
};

// 弹窗相关
const formRef = ref(null);
const dialogRelevant = reactive({
  form: {
    unit_name: '',
    unit_code: '',
    apply_user: '',
    applied_at: '',
    apply_mobile: '',
    process_user: '',
    processed_at: '',
    process_mobile: '',
  },
  rules: {
    unit_name: [{required: true, message: '请输入单位名称', trigger: 'blur'}],
    unit_code: [{required: true, message: '请输入单位代码', trigger: 'blur'}],
  },

  dialogCancel: () => {
    formRef.value.clearValidate();
    handleClose();
  },
  dialogConfirm: () => {
    formRef.value.validate((valid) => {
      if (valid) {
        manageApi
          .companySave({
            id: props.id,
            unit_name: dialogRelevant.form.unit_name,
            unit_code: dialogRelevant.form.unit_code,
          })
          .then((res) => {
            if (res.status === 0) {
              ElMessage.success(res.message);
              emit('updateList');
            }
          })
          .catch((err) => {
            throw err;
          });
      }
    });
  },
});
// 获取详情数据
const getDetailData = () => {
  manageApi
    .companyDetails({id: props.id})
    .then((res) => {
      dialogRelevant.form = {
        unit_name: res.data.unit_name,
        unit_code: res.data.unit_code,
        apply_user: res.data.apply.apply_user,
        applied_at: res.data.apply.applied_at,
        apply_mobile: res.data.apply.apply_mobile,
        process_user: res.data.apply.process_user,
        processed_at: res.data.apply.processed_at,
        process_mobile: res.data.apply.process_mobile,
      };
    })
    .catch((err) => {
      throw err;
    });
};
// 拖拽相关
const dialogClassName = ref('dialogClassName');
let draggable;

const setUseDraggable = () => {
  dialogClassName.value += store.state.dialogClassNameCount;
  store.commit('changeDialogClassNameCount', 1);
  const params = {
    fatherSelector: dialogClassName.value,
  };
  nextTick(() => {
    draggable = new UseDraggable(params);
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
  });
};

watch(
  () => dialogVisible.value,
  (newVal) => {
    if (newVal && draggable !== '') {
      // 元素拖拽
      draggable = setUseDraggable();
    }
  },
);
const newDra = () => {
  const params = {
    fatherSelector: dialogClassName.value,
  };
  // eslint-disable-next-line no-new
  new UseDraggable(params);
};

const selectDialog = () => {
  try {
    const sonDom = document.getElementsByClassName(dialogClassName.value)[0];
    sonDom.parentNode.style.zIndex = store.state.dialogzIndex;
    store.commit('changeDialogzIndex', 1);
  } catch {}
};

onMounted(() => {
  dialogVisible.value = props.dialogVisible;
  getDetailData();
});
</script>
<style lang="scss" scoped>
.dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 468px;
  background: #fff;

  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
    0px 6px 16px -8px rgba(0, 0, 0, 0.08);
  &:deep(.el-dialog__body) {
    padding: 0;
  }
  &:deep(.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before) {
    content: '' !important;
  }
  .dialog-title {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    > p {
      font-size: 16px;
      font-weight: 500;
      color: #000;
    }
    &-close {
      cursor: pointer;
    }
  }
  .dialog-con {
    .el-form {
      display: flex;
      flex-direction: column;
      padding: 24px 48px;
      padding-top: 12px;
    }
    .el-form-item {
      margin-top: 15px;
      .el-input {
        width: 280px;
      }
      .el-select {
        width: 280px;
        &:deep(.el-input--suffix) {
          width: 280px;
        }
      }
    }
    &:deep(.el-form-item__label) {
      margin-right: 34px;
      text-align: right !important;
    }
  }
  .dialog-line {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
  }
  .dialog-footer {
    display: flex;
    height: 52px;
    margin-top: 20px;
    padding-right: 20px;
    justify-content: flex-end;
  }
}
</style>
